import 'package:dailoz/size_config.dart';
import 'package:flutter/material.dart';

class HtmlDialog extends StatefulWidget {
  static String id = "dialog";

  const HtmlDialog(
      {Key? key,
      this.confirmCallback,
      this.dismissCallback,
      this.title,
      this.content,
      this.confirmContent,
      this.outsideDismiss = true,
      this.cancelContent})
      : super(key: key);

  final String? title; // 弹框标题
  final Widget? content; // 弹框内容
  final String? confirmContent; // 确认按钮文本
  final String? cancelContent; // 取消按钮文本
  final bool outsideDismiss; // 点击弹窗外部，关闭弹窗，默认为true
  final Function? confirmCallback; // 点击确定按钮回调
  final Function? dismissCallback; // 弹框关闭的回调

  @override
  State<HtmlDialog> createState() => _HtmlDialogState();
}

class _HtmlDialogState extends State<HtmlDialog> {
  _confirmDialog() {
    if (widget.confirmCallback != null) {
      widget.confirmCallback!();
    }
  }

  _dismissDialog() {
    if (widget.dismissCallback != null) {
      widget.dismissCallback!();
    }
  }

  @override
  Widget build(BuildContext context) {
    Column columnText = Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Container(
          margin: EdgeInsets.only(
              top: SizeConfig.getProportionateScreenHeight(26.0)),
          alignment: Alignment.center,
          child: Text(
            widget.title == null ? '' : widget.title!,
            style: TextStyle(
              color: const Color(0xff10275a),
              fontSize: SizeConfig.getProportionateFontSize(22.0),
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
        Expanded(
          flex: 1,
          child: Container(
            margin:
                const EdgeInsets.symmetric(horizontal: 30.0, vertical: 30.0),
            child: widget.content,
          ),
        ),
        Row(
          children: <Widget>[
            Expanded(
              flex: 1,
              child: Container(
                  margin: EdgeInsets.only(
                    right: SizeConfig.getProportionateScreenWidth(40.0),
                    left: SizeConfig.getProportionateScreenWidth(40.0),
                    bottom: SizeConfig.getProportionateScreenHeight(30.0),
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: <Widget>[
                      SizedBox(
                        height: SizeConfig.getProportionateScreenHeight(40.0),
                        width: SizeConfig.getProportionateScreenWidth(100.0),
                        child: ElevatedButton(
                          style: ElevatedButton.styleFrom(
                            backgroundColor: Colors.white,
                            side: const BorderSide(
                              width: 1.5,
                              color: Color(0xff5b67ca),
                            ),
                          ),
                          child: Text(
                            widget.cancelContent!,
                            style: TextStyle(
                              fontSize:
                                  SizeConfig.getProportionateFontSize(14.0),
                              fontWeight: FontWeight.bold,
                              color: const Color(0xff5b67ca),
                            ),
                          ),
                          onPressed: () {
                            _dismissDialog();
                          },
                        ),
                      ),
                      SizedBox(
                        height: SizeConfig.getProportionateScreenHeight(40.0),
                        width: SizeConfig.getProportionateScreenWidth(100.0),
                        child: ElevatedButton(
                          style: ElevatedButton.styleFrom(
                              backgroundColor: const Color(0xff5b67ca)),
                          child: Text(
                            widget.confirmContent!,
                            style: TextStyle(
                                fontSize:
                                    SizeConfig.getProportionateFontSize(14.0),
                                color: Colors.white,
                                fontWeight: FontWeight.bold),
                          ),
                          onPressed: () {
                            _confirmDialog();
                          },
                        ),
                      ),
                    ],
                  )),
            ),
          ],
        )
      ],
    );

    return WillPopScope(
      child: GestureDetector(
        onTap: () => {widget.outsideDismiss ? _dismissDialog() : null},
        child: Material(
          type: MaterialType.transparency,
          child: Center(
            child: Padding(
              padding: EdgeInsets.only(
                  bottom: MediaQuery.of(context).viewInsets.bottom),
              child: Container(
                width: SizeConfig.getProportionateScreenWidth(336.0),
                height: SizeConfig.getProportionateScreenHeight(229.0),
                alignment: Alignment.center,
                decoration: BoxDecoration(
                  color: const Color(0xffffffff),
                  borderRadius: BorderRadius.circular(20.0),
                ),
                child: columnText,
              ),
            ),
          ),
        ),
      ),
      onWillPop: () async {
        return widget.outsideDismiss;
      },
    );
  }
}
